<template>
  <div>
    <div class="swiper-container">
      <swiper ref="mySwiper" :options="swiperOptions">
        <!-- <swiper-slide v-for="item in slideList" :key="item.id"> -->
        <!-- <div  class="lungbopic" :style="`background-images:url(${item.s_photos[0].path}) `">h123</div> -->
        <!-- <div  class="lungbopic" :style="{ backgroundImage: `url{ ${item.s_photos[0].path} }` }">h123</div>  -->
        <!-- <img :src="item.s_photos[0].path" alt="" /> -->
        <!-- </swiper-slide> -->
        <swiper-slide>
          <!-- 这里引入背景图去更改只能用字符拼接  并注意驼峰-->
          <div
            class="lungbopic"
            :style="{
              backgroundImage: 'url(' + slideList[0].s_photos[0].path + ')',
            }"
          >
            <!-- 设置动画 -->

            <div
              class="animate__animated animate__fadeInDown animate__fast 800ms"
              v-show="aa"
            >
              <div class="lunbotitle">
                <div class="container">
                  <h3>DJ2 ARS</h3>
                  <h4>一尽所有</h4>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <!-- 这里引入背景图去更改只能用字符拼接 -->
          <div
            class="lungbopic"
            :style="{
              backgroundImage: 'url(' + slideList[1].s_photos[0].path + ')',
            }"
          >
            <div
              class="animate__animated animate__fadeInDown animate__fast 800ms"
              v-show="aa"
            >
              <div class="lunbotitle">
                <div class="container colorwhite">
                  <h3>DJ2 FPV</h3>
                  <h4>飞临其境</h4>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <!-- 这里引入背景图去更改只能用字符拼接 -->
          <div
            class="lungbopic"
            :style="{
              backgroundImage: 'url(' + slideList[2].s_photos[0].path + ')',
            }"
          >
            <div
              class="animate__animated animate__fadeInDown animate__fast 800ms"
              v-show="aa"
            >
              <div class="lunbotitle">
                <div class="container colorwhite">
                  <h3>DJ2 POCKET2</h3>
                  <h4>拍什么，一手都有</h4>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
        <swiper-slide>
          <!-- 这里引入背景图去更改只能用字符拼接 -->
          <div
            class="lungbopic"
            :style="{
              backgroundImage: 'url(' + slideList[3].s_photos[0].path + ')',
            }"
          >
            <div
              class="animate__animated animate__fadeInDown animate__fast 800ms"
              v-show="aa"
            >
              <div class="lunbotitle">
                <div class="container">
                  <h3>DJ2 MINI2</h3>
                  <h4>迷你拍摄</h4>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <div class="swiper-pagination"></div>
      <!--分页器。如果放置在swiper-container外面，需要自定义样式。-->
      <div class="swiper-button-prev"></div>
      <!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
      <div class="swiper-button-next"></div>
      <!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
    </div>
  </div>
</template>

<script>
import { carousel } from "@/assets/tool/request.js";
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";

let myVue = [];

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  data() {
    return {
      aa: true,
      slideList: [],
      // 这个用来设置配置及
      swiperOptions: {
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        effect: "fade",
        // loop: true,
        autoplay: {},
        //  {
        //   reverseDirection: true,
        //   delay: 3000, //1秒切换一次
        // },
        speed: 1000,
        on: {
          slideChangeTransitionEnd: function () {
            myVue.aa = true;
          },
          slideChangeTransitionStart: function () {
            myVue.aa = false;
          },
        },
      },
    };
  },
  directives: {
    swiper: directive,
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    },
  },
  async created() {
    let res = await carousel({
      project_id: 104,
    });
    this.slideList = res.data.result.rows;
  },
  beforeCreate() {
    myVue = this;
    // console.log(myVue);
  },
  mounted() {
    this.autoplay = {
      reverseDirection: true,
      delay: 3000, //1秒切换一次
    };
  },
};
</script>

<style scoped>
.swiper-container {
  --swiper-theme-color: rgba(255, 255, 255, 0.7);
  height: 480px;
  background-color: black;
}

img {
  height: 480px;
  width: auto;
  /* margin: 0 auto; */
}
.lungbopic {
  height: 480px;
  background-position: center;
  /* 保持比例 */
  background-size: cover;
}

.lunbotitle h3 {
   font-family: Microsoft JhengHei;
  font-size: 30px;
}
.lunbotitle h4 {
  margin-top: 40px;
  font-size: 24px;
}

.lunbotitle {
  width: 1200px;
  height: 480px;
  margin: auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 150px;
}

.colorwhite {
  color: white;
}
</style>